<template>
  <ul class="list">
    <li v-for="(item) in list" :key="item.id">
      <div class="top">
        <div class="left">
          <img :src="item.sextype==0?touxiang1:touxiang2" alt="">
        </div>
        <div class="right">
          <p class="p1">
            <span class="name">{{item.username}}</span>
            <i class="dj">VIP{{item.vip}}</i>
            <span class="sex">{{sexobj[item.sextype]}}</span>
            <span class="age">{{item.age}}</span>
            <span class="work" :style='{background:bgobj[item.status]}'>{{statusobj[item.status]}}</span>
          </p>
          <p class='time'>创建时间:{{item.date}}</p>
          <div class="ks">
            <span>科室：全科</span>
            <span style="margin-left:30px">医生：{{item.doctorname}}</span>
          </div>
          <p class="tel">手机号码：{{item.tel}}</p>
        </div>
      </div>
      <div class="bot">
        <span class="sp1">接诊</span>
        <span>查看患者信息</span>
      </div>
    </li>
  </ul>
</template>

<script>
import touxiang1 from '../../../assect/imgs/main-icon-touxiang-01.png'
import touxiang2 from '../../../assect/imgs/main-icon-touxiang-02.png'
export default {
  props: ['list'],
  data () {
    return {
      touxiang1:touxiang1,
      touxiang2:touxiang2,
      sexobj:{
        0:"男",
        1:'女'
      },
      statusobj:{
        0:'待接诊',
        1:'接诊中',
        2:'已完成'
      },
      bgobj:{
         0: '#FF6262',
         1: '#28D094',
         2: '#CCCCCC'
      }
    }
  }
}
</script>

<style lang="less" scoped>
    .list{
        width: 100%;
        overflow: hidden;
        padding: 0 20px;
        li{
            width: 31%;
            height: 240px;
            float: left;
            margin-right: 20px;
            margin-bottom:30px;
            border: 1px solid #eee;
            box-shadow: 2px 2px 12px 0 rgba(0, 0, 0, 0.1);
            border-radius: 4px;
            .top{
              height: 200px;
              display: flex;
              border-bottom: 1px solid #B8B8B8;
              .left{
                width: 100px;
                img{
                  width:60px;
                  height: 60px;
                  margin:40px 20px;
                }
              }
              .right{
                width: 243px;
                .p1{
                  height:100px;
                  line-height: 100px;
                  .name{
                    font-size: 16px;
                    color:#676767;
                    font-weight: bold;
                  }
                  .dj{
                     font-size: 12px;
                     color:#7645f8;
                     margin-left: 25px;
                     font-style: italic;
                     font-weight: bold;
                  }
                  .sex{
                     font-size:14px;
                     color:#868686;
                     margin-left: 25px;
                  }
                  .age{
                     font-size: 14px;
                     color:#7645f8;
                     margin-left: 10px;
                  }
                  .work{
                    // display: block;
                    padding: 2px 10px;
                    text-align: center;
                    color:#fff;
                    font-size: 14px;
                    border-radius: 10px;
                    margin-left:15px
                  }
                }
                .time,.ks,.tel{
                  line-height: 30px;
                  font-size: 14px;
                  color:#868686;
                }
                
              }
            }
            .bot{
              width: 100%;
              height: 40px;
              line-height: 40px;
              span{
                display: block;
                float: left;
                width: 49.8%;
                text-align: center;
                font-size: 14px;
              }
              .sp1{
                  border-right: 1px solid #B8B8B8;
                  color:#bcbff4;
              }
            }
            .bot span:hover{
                color: #fff;
                background: #8a90ec;
            }
        }
        li:nth-of-type(3n){
          margin-right: 0;
        }
    }
</style>